<template>
  <div class="cloud-service">
    <!-- search condition -->
    <Row>
      <Col :span="18">
        购买日期
          <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间"></DatePicker>
        至
          <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择时间"></DatePicker>
        
      &nbsp;&nbsp;&nbsp;
        产品名称
        <Input placeholder="请输入产品名称" style="width: auto" >
          <!-- <span slot="append">查询</span> -->
        </Input>
        <Button type="primary" >查询</Button>
            &nbsp;&nbsp;&nbsp;
        </Col>
        <Col :span="6" class="text-right">
        
        <!-- <span class="c4">¥50000.00</span> -->
        <Button type="warning" >
          <Icon type="md-download" size="20"/>
          数据导出</Button>
      </Col>
    </Row>
    <!-- tables -->
    <div class="mt10">
      
        <Table stripe border :columns="columns1" :data="data1">
          <template slot-scope="{ row, index }" slot="address">
            <a class="c1" href="#">http://qq.com</a>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Icon type="ios-construct c4" size="20" title="报修" @click="repaire(row)"/>

            <Icon type="ios-paper c1" size="20" title="查看详情" @click="gotoDetail(row)"/>
          </template>
        </Table>
    
    </div>
      
     <div class="page mt20">
       <Page :total="100" show-sizer show-total/>
     </div> 
      <!-- dialog -->
     <Modal v-model="modal1" width="700" title="报修">
       <div>
         <p>产品名称：教育局版</p>
         <p class="mt20">产品型号：云课堂</p>
 
         <p class="mt20">报修内容：
            <Input type="textarea" placeholder="请输入保修内容" style="width:300px;"></Input>
         </p>
         <p class="mt20">保修时间：2019-09-08 16:33</p>
         <p class="mt20">联&nbsp;系&nbsp;人&nbsp;&nbsp;：<Input type="text" placeholder="请输入内容" style="width: 300px;"></Input></p>
         <p class="mt20">联系手机：<Input type="text" placeholder="请输入内容" style="width: 300px;"></Input></p>
       </div>
       <div slot="footer" class="text-center mt20" >
         <Button type="primary" size="large" @click="submit">提交</Button>
       </div>
     </Modal>
  </div>
</template>

<script>
export default {
  mounted () {
    this.$store.commit('UPDATE_POSITION', this.position)
  },
  data (){
    return {
      position:[
        {title: '云服务', link:'/admin/cloudService'},
        {title: '我的服务'}
      ],
      modal1: false,
      columns1: [
        {title: '订单号', key: 'id'},
        {title: '产品名称', key: 'address'},
        { title: '产品型号', key: 'address'},
        { title: '类型', key: 'address'},
        { title: '访问地址', slot: 'address', width:180},
        { title: '创建时间', key: 'address'},
        { title: '支付时间', key: 'address'},
        { title: '状态', key: 'address'},
        { title: '操作', slot: 'action', width: 160, align: 'center'},
       ],
       data1:[
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         {
           id: '103232',
           'address': 'fsdfsdfdsf'
         },
         
       ]
    }
  },
  methods:{
    gotoDetail (item) {
      this.$router.push(`buyDetail?id=${item.id}`)
    },
    repaire (item) {
      this.modal1 = true
    },
  }
}
</script>

<style lang="less" scoped>
</style>
